<!DOCTYPE html>
<html>
<head>
<title>FontScroll.js--文字行向上滚动插件</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body,div,p,ul,table,li{margin:0;padding:0;}
ul li{list-style:none;}
.FontScroll { width:500px;height:90px;line-height:29px;border:1px solid green;overflow:Hidden;margin:10px; }
.FontScroll ul{ text-align:center;width:100%; }
.FontScroll ul li{ border-bottom:1px dotted red; }
.FontScroll .fontColor { color:red;background-color:aqua; }


</style>
<script src="./js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src='fontscroll.js'></script>
<script type="text/javascript">

//var type = "ul";//滚动列表
var type = "table";//滚动表格

var demo1 = null;
var demo2 = null;
var demo3 = null;

$(function(){
	/**
	 * 初始化FontScroll
	 * @target 选择器，选择滚动区域ul外层的div
	 * @options 参数：
	 * 		time：每次滚动的时间间隔(单位：毫秒)，默认3000
	 * 		speed：滚动动画时间(单位：毫秒)，数值越小滚动动画速度越快，默认500
	 * 		rowClass：滚动选中行的样式，默认：fontColor
	 * 		num：滚动选中的行序号，默认：0 表示第一行
	 * 		skip：滚动时上面留白显示的行数，默认0
	 * 		pauseOnHover：鼠标经过时是否暂停，默认：true
	 *		startOnInit：初始化后是否自动运行，默认：true
	 * 		init: 是否默认初始化，默认true。默认初始化会给开始行添加rowClass。
	 */
	 
    demo1 = new FontScroll('#FontScroll1', {
		time: 2000,//每次滚动的时间间隔(单位：毫秒)，默认3000
		speed: 500,//滚动动画时间(单位：毫秒)，数值越小滚动动画速度越快，默认500
		timeoutMethod: 'interval', //延时时间方式：interval-使用setInverval处理；timeout-使用setTimeout处理
		rowClass: 'fontColor',//滚动选中行的样式，默认：fontColor
		num: 0,//滚动选中的行序号，默认：0 表示第一行
		skip: 0,//滚动时上面留白显示的行数，默认0
		scrollBehavior: 'rowFirst', //滚动动画与行样式的先后顺序：rowFirst先加行样式，再动画滚动；scrollFirst先动画滚动，再加行样式
		pauseOnHover: false,//鼠标经过时是否暂停，默认：true
		startOnInit: false,//初始化后是否自动运行，默认：true
		init: false,
		ul: 'ul', //滚动的行的外部容器（选择器），用于获取滚动区域的实际高度
		li: 'li', //滚动行（选择器）
	});
	
    demo2 = new FontScroll('#FontScroll2', {
		time: 2000,//每次滚动的时间间隔(单位：毫秒)，默认3000
		speed: 500,//滚动动画时间(单位：毫秒)，数值越小滚动动画速度越快，默认500
		timeoutMethod: 'interval', //延时时间方式：interval-使用setInverval处理；timeout-使用setTimeout处理
		rowClass: 'fontColor',//滚动选中行的样式，默认：fontColor
		num: 1,//滚动选中的行序号，默认：0 表示第一行
		skip: 1,//滚动时上面留白显示的行数，默认0
		scrollBehavior: 'scrollFirst', //滚动动画与行样式的先后顺序：rowFirst先加行样式，再动画滚动；scrollFirst先动画滚动，再加行样式
		pauseOnHover: false,//鼠标经过时是否暂停，默认：true
		startOnInit: false,//初始化后是否自动运行，默认：true
		init: false,
		ul: 'table', //滚动的行的外部容器（选择器），用于获取滚动区域的实际高度
		li: 'tr', //滚动行（选择器）
	});
	
	demo3 = new FontScroll('#FontScroll3', {
		time: 2000,//每次滚动的时间间隔(单位：毫秒)，默认3000
		speed: 500,//滚动动画时间(单位：毫秒)，数值越小滚动动画速度越快，默认500
		timeoutMethod: 'timeout', //延时时间方式：interval-使用setInverval处理；timeout-使用setTimeout处理
		rowClass: 'fontColor',//滚动选中行的样式，默认：fontColor
		num: 2,//滚动选中的行序号，默认：0 表示第一行
		skip: 2,//滚动时上面留白显示的行数，默认0
		scrollBehavior: 'rowFirst', //滚动动画与行样式的先后顺序：rowFirst先加行样式，再动画滚动；scrollFirst先动画滚动，再加行样式
		pauseOnHover: false,//鼠标经过时是否暂停，默认：true
		startOnInit: false,//初始化后是否自动运行，默认：true
		init: false,
		ul: '.container', //滚动的行的外部容器（选择器），用于获取滚动区域的实际高度
		li: '.row', //滚动行（选择器）
	});
	
});

// ======================

//初始化
function init() {
	if(demo1 != null) demo1.init();
	if(demo2 != null) demo2.init();
	if(demo3 != null) demo3.init();
}

//启动
function start() {
	if(demo1 != null) demo1.start();
	if(demo2 != null) demo2.start();
	if(demo3 != null) demo3.start();
}

//暂停
function pause() {
	if(demo1 != null) demo1.pause();
	if(demo2 != null) demo2.pause();
	if(demo3 != null) demo3.pause();
}

//继续
function resume() {
	if(demo1 != null) demo1.resume();
	if(demo2 != null) demo2.resume();
	if(demo3 != null) demo3.resume();
}

//停止
function stop() {
	if(demo1 != null) demo1.stop();
	if(demo2 != null) demo2.stop();
	if(demo3 != null) demo3.stop();
}

//销毁
function destroy() {
	if(demo1 != null) demo1.destroy();
	if(demo2 != null) demo2.destroy();
	if(demo3 != null) demo3.destroy();
}

//向上一行
function up() {
	if(demo1 != null) demo1.up(true);
	if(demo2 != null) demo2.up(true);
	if(demo3 != null) demo3.up(true);
}






//加一行
function testAddLi() {
	if(demo1 != null) {
		demo1.addLi("<li style='height:35px;'>第"+(demo1.length+1)+"条</li>");
		console.info("已添加一行li");
	}
	if(demo2 != null) {
		demo2.addLi("<tr><td style='height:35px;'>第"+(demo2.length+1)+"条</td></tr>");
		console.info("已添加一行tr");
	}
	if(demo3 != null) {
		demo3.addLi("<div class='row' style='height:35px;'>第"+(demo3.length+1)+"条</div>");
		console.info("已添加一行div");
	}
}
//删一行
function testRemoveLi() {
	if(demo1 != null) {
		demo1.removeLi("li:last");
		console.info("已删除一行li");
	}
	if(demo2 != null) {
		demo2.removeLi("tr:last");
		console.info("已删除一行tr");
	}
	if(demo3 != null) {
		demo3.removeLi("div:last");
		console.info("已删除一行div");
	}
}
//更新参数
function testUpdateOptions() {
	//demo1.stop();
	//demo2.stop();
	//demo3.stop();
	var opt = {
		time: 1000,
		//num: 0,
		//skip: 0,
	};
	if(demo1 != null) demo1.updateOptions(opt, true);//第二个参数表示 是否立即生效
	if(demo2 != null) demo2.updateOptions(opt, true);//第二个参数表示 是否立即生效
	if(demo3 != null) demo3.updateOptions(opt, true);//第二个参数表示 是否立即生效
	console.info("已更新参数：time="+opt.time+"\tnum="+opt.num+"\tskip="+opt.skip);
	//demo1.start();
	//demo2.start();
	//demo3.start();
}
//更改容器高度
function testResizeContainer() {
	$("#FontScroll1").css("height", "400");
	$("#FontScroll2").css("height", "400");
	$("#FontScroll3").css("height", "400");
}
//更高容器宽度  type='up'增加；type='down'减小
function testResize(type) {
	myResize("#FontScroll1",type);
	myResize("#FontScroll2",type);
	myResize("#FontScroll3",type);
}
function myResize(id,type) {
	var con = $(id);
	if(type == 'up') {
		var h = con.height()+50;
		con.css("height", h);
	} else {
		var h = con.height()-50;
		if(h <= 0) {
			h = 30;
		}
		con.css("height", h);
	}
}
</script>
</head>
<body>
<div style="width:500px; text-align:center;">
	<input type="button" value="初始化(init)" onclick="init()">
	<input type="button" value="启动(start)" onclick="start()">
	<input type="button" value="暂停(pause)" onclick="pause()">
	<input type="button" value="继续(resume)" onclick="resume()">
	<input type="button" value="停止(stop)" onclick="stop()">
	<input type="button" value="销毁(destroy)" onclick="destroy()">
	<input type="button" value="滚动一行(up)" onclick="up()">
	<br>
	<input type="button" value="加一行li(addLi)" onclick="testAddLi()">
	<input type="button" value="减一行li(removeLi)" onclick="testRemoveLi()">
	<input type="button" value="更新参数(updateOptions)" onclick="testUpdateOptions()">
	<input type="button" value="更改容器高度" onclick="testResizeContainer()">
	<input type="button" value="增加容器高度" onclick="testResize('up')">
	<input type="button" value="减小容器高度" onclick="testResize('down')">
</div>

<div id="FontScroll1" class="FontScroll" style="width:500px;height:105px;line-height:29px;border:1px solid green;overflow:hidden;margin:10px;">

	<ul style="text-align:center;width:100%;">
        <li style="height:35px;">第1条</li>
        <li style="height:35px;">第2条</li>
        <li style="height:35px;">第3条</li>
        <li style="height:35px;">第4条</li>
        <li style="height:35px;">第5条</li>
        <li style="height:35px;">第6条</li>
    </ul>
	
</div>

<div id="FontScroll2" class="FontScroll" style="width:500px;height:105px;line-height:29px;border:1px solid green;overflow:hidden;margin:10px;">
	
	<table border=0 cellpadding=0 cellspacing=0 style="text-align:center;width:100%;">
		<colgroup>
			<col />
			<col />
			<col />
			<col />
			<col />
			<col />
		</colgroup>
		<tr><td style="height:35px;">第1条</td></tr>
		<tr><td style="height:35px;">第2条</td></tr>
		<tr><td style="height:35px;">第3条</td></tr>
		<tr><td style="height:35px;">第4条</td></tr>
		<tr><td style="height:35px;">第5条</td></tr>
		<tr><td style="height:35px;">第6条</td></tr>
	</table>
	
</div>

<div id="FontScroll3" class="FontScroll" style="width:500px;height:105px;line-height:29px;border:1px solid green;overflow:hidden;margin:10px;">
	
	<div class="container" style="text-align:center;width:100%;">
		<div class="row" style="height:35px;">第1条</div>
		<div class="row" style="height:35px;">第2条</div>
		<div class="row" style="height:35px;">第3条</div>
		<div class="row" style="height:35px;">第4条</div>
		<div class="row" style="height:35px;">第5条</div>
		<div class="row" style="height:35px;">第6条</div>
	</div>
	
</div>


</body>
</html>